<template>
  <div class="login-container">
    <div class="noisy">
      <div class="emblem"></div>
      <div class="frame">
        <div class="piece output">
          <h1>Login</h1>
          <p>information : This is the login program for DSEC Background management system。</p>
          <p>stranger,enter your userName quickly!</p>
          <div>
            <el-row
              type="flex"
              justify="start"
            >
              <p>unKnow user/></p>
              <input
                type="text"
                autofocus="autofocus"
                @keyup.enter="next"
                v-model="userName"
                ref="username"
              />
            </el-row>
          </div>
          <p v-show="showPassword">now,enter your password。</p>
          <div v-show="showPassword">
            <el-row
              type="flex"
              justify="start"
            >
              <p>unKnow user/></p>
              <input
                type="password"
                ref="password"
                v-model="password"
                @keyup.enter="validate"
              />
            </el-row>
          </div>
          <p v-show="showResult">{{message}}</p>
        </div>
      </div>
    </div>
    <div class="piece scanlines noclick"></div>
    <div class="piece glow noclick"></div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      showPassword: false,
      message: "",
      showResult: false,
      userName: "",
      password: "",
    };
  },
  methods: {
    ...mapMutations(["changeLoginStatus"]),
    next() {
      this.showPassword = true;
      this.$refs.username.blur();
      setTimeout(() => {
        this.$refs.password.focus();
      }, 100);
    },
    async validate() {
      let res = await this.axios("/configs/single", {
        params: {
          userName: this.userName,
          password: this.password,
        },
      });
      if (res.data.code == 0) {
        this.message = "you are permitted !";
        setTimeout(() => {
          this.changeLoginStatus(JSON.stringify(res.data.userInfo));
          if (res.data.userInfo.authorityList.includes("3")) {
            this.$router.push("/modList"); // 如果是mod开发者则跳转到mod列表
          } else {
            this.$router.push("/feed-back-list");
          }
        }, 1000);
      } else {
        this.message = "you are forbidden !";
      }
      this.showResult = true;
    },
  },
};
</script>

<style lang="scss" scoped>
// pixelish webfont

@import url(https://fonts.googleapis.com/css?family=VT323);

// set main colors

$console-color: #14fdce;
$console-bg: #031e11;

// global settings

* {
  box-sizing: border-box;
}

.login-container {
  background: #383838;
  color: $console-color;
  font-family: "VT323";
  font-size: 24px;
  -webkit-font-smoothing: none;
  line-height: 1.2;
}

h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

p {
  margin-bottom: 2rem;
}

input {
  margin-left: 12px;
  height: 28px;
  border: none;
  background: transparent;
  outline: none;
  color: $console-color;
  font-family: "VT323";
  font-size: 24px;
  -webkit-font-smoothing: none;
  line-height: 1.2;
}

a,
a:visited {
  border-bottom: 0.2rem solid $console-color;
  color: $console-color;
  text-decoration: none;
}

a:active,
a:focus,
a:hover {
  background-color: $console-color;
  color: $console-bg;
}

// basic screen module

.piece {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

// prevent clicks

.noclick {
  pointer-events: none;
}

// screen bevel

.frame {
  background-color: transparent;
  border: 1rem solid;
  border-bottom-color: #121212;
  border-left-color: #080808;
  border-right-color: #080808;
  border-top-color: #020202;
  box-shadow: inset 0 0 18rem black, inset 0 0 3rem black, 0 0 10rem black;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

// manufacturer's emblem

.emblem {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  font-size: 2rem;
  height: 3rem;
  width: 3rem;
  text-align: center;
  color: white;
  background: -webkit-linear-gradient(#fff, #555);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0.1rem 0rem rgba(0, 0, 0, 0.4), 0 0 2rem rgba(0, 0, 0, 0.8);
  transform: translate(-50%);
}

// screen output

.output {
  animation: crt-output 2s infinite;
  background-color: $console-bg;
  overflow: scroll;
  position: absolute;
  padding: 3rem 2rem;
  pointer-events: auto;
  text-shadow: 0rem 0.2rem 1rem lighten($console-bg, 20%);
  z-index: -1;
  overflow: hidden;
}

@keyframes crt-output {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

// chunky scanlines

.scanlines {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.6)
  );
  background-size: 100% 0.3rem;
  border-radius: 2rem;
  position: absolute;
}

// screen glow

.glow {
  animation: crt-glow 60s infinite;
  background: radial-gradient(
    circle at center,
    rgba(27, 212, 89, 1) 0%,
    rgba(27, 212, 89, 0.88) 58%,
    rgba(21, 235, 92, 0.57) 80%,
    rgba(19, 94, 29, 0.27) 93%,
    rgba(10, 23, 12, 0) 100%
  );
  //filter: blur(10rem) opacity(0.1);
  opacity: 0.15;
  pointer-events: none;
  position: fixed;
}

@keyframes crt-glow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.2;
  }
}

// make text selection look good

::-moz-selection {
  background-color: $console-color;
  color: $console-bg;
}
::selection {
  background-color: $console-color;
  color: $console-bg;

  // emblem webfont

  @font-face {
    font-family: "uuxsl";
    src: url("https://i.icomoon.io/public/188ac2dd2d/VOX/uuxsl.eot");
  }
  @font-face {
    font-family: "uuxsl";
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SA1AAAAC8AAAAYGNtYXAaL8yjAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZiGj2jMAAAFwAAAA7GhlYWQEpbQaAAACXAAAADZoaGVhB6kDxgAAApQAAAAkaG10eAYAABkAAAK4AAAAFGxvY2EAKACKAAACzAAAAAxtYXhwAA0AMgAAAtgAAAAgbmFtZeGQWB4AAAL4AAABM3Bvc3QAAwAAAAAELAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmJgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYm//3//wAAAAAAIOYm//3//wAB/+MZ3gADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABwAZ/8YD5wO1AAUADQAVABsAIQAnAC8AABMVFzcnNQMFERcnNzU3ARElBxcVFwcvARUHFzcDJwcVNxcHFzc1JwcBBycHJxUFJeFVb1UZ/uJwAslVAkL+4m5VygJYcFVvVs1TU1NTplNTU1MBclXKylUBHwEfAbdnMUExZwG9pf61QWh04zH+UQFLpUEx4nVoNEFoMUExAcAwMHwxMNAxMWkvMP67MXV1MXympwAAAAABAAAAAQAAwDym7F8PPPUACwQAAAAAANDPt9EAAAAA0M+30QAA/8YD5wO1AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAPnAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAgAAAAQAABkAAAAAAAoAFAAeAHYAAQAAAAUAMAAHAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAoAAAABAAAAAAACAA4AOQABAAAAAAADAAoAIAABAAAAAAAEAAoARwABAAAAAAAFABYACgABAAAAAAAGAAUAKgABAAAAAAAKADQAUQADAAEECQABAAoAAAADAAEECQACAA4AOQADAAEECQADAAoAIAADAAEECQAEAAoARwADAAEECQAFABYACgADAAEECQAGAAoALwADAAEECQAKADQAUQB1AHUAeABzAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHUAdQB4AHMAbHV1eHNsAHUAdQB4AHMAbABSAGUAZwB1AGwAYQByAHUAdQB4AHMAbABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=)
        format("truetype"),
      url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASYAAsAAAAABEwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIDUGNtYXAAAAFoAAAATAAAAEwaL8yjZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAOwAAADsIaPaM2hlYWQAAAKoAAAANgAAADYEpbQaaGhlYQAAAuAAAAAkAAAAJAepA8ZobXR4AAADBAAAABQAAAAUBgAAGWxvY2EAAAMYAAAADAAAAAwAKACKbWF4cAAAAyQAAAAgAAAAIAANADJuYW1lAAADRAAAATMAAAEz4ZBYHnBvc3QAAAR4AAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5iYDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmJv/9//8AAAAAACDmJv/9//8AAf/jGd4AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAcAGf/GA+cDtQAFAA0AFQAbACEAJwAvAAATFRc3JzUDBREXJzc1NwERJQcXFRcHLwEVBxc3AycHFTcXBxc3NScHAQcnBycVBSXhVW9VGf7icALJVQJC/uJuVcoCWHBVb1bNU1NTU6ZTU1NTAXJVyspVAR8BHwG3ZzFBMWcBvaX+tUFodOMx/lEBS6VBMeJ1aDRBaDFBMQHAMDB8MTDQMTFpLzD+uzF1dTF8pqcAAAAAAQAAAAEAAMA8puxfDzz1AAsEAAAAAADQz7fRAAAAANDPt9EAAP/GA+cDtQAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD5wABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAIAAAAEAAAZAAAAAAAKABQAHgB2AAEAAAAFADAABwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAKAAAAAQAAAAAAAgAOADkAAQAAAAAAAwAKACAAAQAAAAAABAAKAEcAAQAAAAAABQAWAAoAAQAAAAAABgAFACoAAQAAAAAACgA0AFEAAwABBAkAAQAKAAAAAwABBAkAAgAOADkAAwABBAkAAwAKACAAAwABBAkABAAKAEcAAwABBAkABQAWAAoAAwABBAkABgAKAC8AAwABBAkACgA0AFEAdQB1AHgAcwBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB1AHUAeABzAGx1dXhzbAB1AHUAeABzAGwAUgBlAGcAdQBsAGEAcgB1AHUAeABzAGwARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA)
        format("woff");
    font-weight: normal;
    font-style: normal;
  }

  [class^="icon-"],
  [class*=" icon-"] {
    font-family: "uuxsl";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-information:before {
    content: "\e626";
  }

  // noise texture

  .noisy {
    background-image: url();
  }
}
</style>